<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>히오스 밴픽 툴</title>
	<style>
		div {position: absolute; background-color: #FFFFFF;}
		div .team1 {border-style: solid; border-width: 2px; border-color: #FF0000;}
		div .team2 {border-style: solid; border-width: 2px; border-color: #0000FF;}
	</style>
</head>

<body>
<div id="container" style="background-color:#FFCCCC; width:1260px; height:700px; position: relative; margin: auto; vertical-align:middle;">
	<div id="team1_name" class="team1" style="width: 146px; height: 56px; position: absolute; left: 20px; top: 20px;">
		1팀 이름
	</div>
	<div id="team2_name" class="team2" style="width: 146px; height: 56px; position: absolute; left: 20px; top: 620px;">
		2팀 이름
	</div>
	<div id="team1_priority" class="team1" style="width: 146px; height: 36px; position: absolute; left: 20px; top: 95px;">
		1팀 가위바위보 결과
	</div>
	<div id="team2_priority" class="team2" style="width: 146px; height: 36px; position: absolute; left: 20px; top: 565px;">
		2팀 가위바위보 결과
	</div>
	<div id="team1_select" class="team1" style="width: 146px; height: 76px; position: absolute; left: 20px; top: 150px;">
		1팀 우선권 선택 결과
	</div>
	<div id="team2_select" class="team2" style="width: 146px; height: 76px; position: absolute; left: 20px; top: 470px;">
		2팀 우선권 선택 결과
	</div>
	<div id="timeline" style="border: 2px #F000F0 solid; width: 1216px; height: 56px; position: absolute; left: 20px; top: 320px;">
		타임라인
	</div>


	<div id="team1_pick1" class="team1" style="width: 146px; height: 206px; position: absolute; left: 230px; top: 20px;">
		1팀 영웅1
	</div>
	<div id="team1_pick2" class="team1" style="width: 146px; height: 206px; position: absolute; left: 440px; top: 20px;">
		1팀 영웅2
	</div>
	<div id="team1_pick3" class="team1" style="width: 146px; height: 206px; position: absolute; left: 650px; top: 20px;">
		1팀 영웅3
	</div>
	<div id="team1_pick4" class="team1" style="width: 146px; height: 206px; position: absolute; left: 860px; top: 20px;">
		1팀 영웅4
	</div>
	<div id="team1_pick5" class="team1" style="width: 146px; height: 206px; position: absolute; left: 1070px; top: 20px;">
		1팀 영웅5
	</div>


	<div id="team2_pick1" class="team2" style="width: 146px; height: 206px; position: absolute; left: 230px; top: 470px;">
		2팀 영웅1
	</div>
	<div id="team2_pick2" class="team2" style="width: 146px; height: 206px; position: absolute; left: 440px; top: 470px;">
		2팀 영웅2
	</div>
	<div id="team2_pick3" class="team2" style="width: 146px; height: 206px; position: absolute; left: 650px; top: 470px;">
		2팀 영웅3
	</div>
	<div id="team2_pick4" class="team2" style="width: 146px; height: 206px; position: absolute; left: 860px; top: 470px;">
		2팀 영웅4
	</div>
	<div id="team2_pick5" class="team2" style="width: 146px; height: 206px; position: absolute; left: 1070px; top: 470px;">
		2팀 영웅5
	</div>
</div>
</body>
</html>
